<template>
	<div v-show='breadcrumbItems.length>1'  class='breadNav'>
		{{titleLanguage[language]}}<a-breadcrumb  separator=">"  :routes="breadcrumbItems"  class='inline-block'> 
						    <template slot="itemRender" slot-scope="{route, params, routes, paths}"> 
							        <span v-if="routes.indexOf(route) === routes.length - 1">
							          {{route.title}}
							        </span>
							        <span  v-else>
							        	<span  v-if='route.isRouter == false'>
							        		{{route.title}}
							        	</span>
							        	<router-link  :to="route.path"  v-else>
								          {{route.title}}
								        </router-link>
							        </span> 
						    </template>
						</a-breadcrumb>  
	</div> 
</template>

<script >
import { mapGetters }  from 'vuex'
	export default {
		name:'breadcrumbs',
		props:{
			// route:{
			// 	type:Object,
			// 	default:()=>{}
			// },
			 
		},
		data(){ 
			return {
				breadLength:null,	
				titleLanguage:{
					"zh_cn":"您当前所在的位置：",
					"en":'Current navigation position: '
				},
			}
		},
		created(){
			// console.log(this.breadcrumbItems)
		},
		methods:{
			
		},
		computed:{
			...mapGetters(['breadcrumbItems','language'])
		}
	}
</script>

<style scoped="scoped">
	.breadNav{width: 1200px;margin:0 auto;padding-top: 20px;}
/*移动端适配*/
@media(max-width: 420px){   
	.breadNav{width: 100%;}  
}
</style>